<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账号列表 </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 白色内容区 -->
        <div class="page_content">
            <div class="flex">
                <div class="input_box">
                    <el-input v-model="searchParams.query" placeholder="搜索关键字" class="input-with-select">
                        <template #append>
                            <el-button @click="searchList"><el-icon>
                                    <Search />
                                </el-icon></el-button>
                        </template>
                    </el-input>
                </div>
                <el-button type="primary" @click="addUser">添加账号</el-button>
            </div>
            <!-- 表格 data:要展示的数据，stripe:隔行变色,scope.row:当前行数据 -->
            <el-table :data="userList" stripe style="width: 100%">
                <el-table-column prop="username" label="姓名" width="180" />
                <el-table-column prop="email" label="邮箱" width="180" />
                <el-table-column prop="mobile" label="电话" />
                <el-table-column prop="role_name" label="角色" />
                <el-table-column prop="mg_state" label="状态"><!-- mg_state  状态 -->
                    <template #default="scope">
                        <el-switch v-model="scope.row.mg_state" @change="switchChange(scope.row)" />
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column prop="mg_state" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, sizes,next, jumper, ->, total" :total="total" 
            v-model:currentPage="searchParams.pagenum"
            v-model:page-size="searchParams.pagesize"
            :page-sizes="[2,3,5,6]"
            @size-change="searchList"
            @current-change="searchList"


            />

        </div>
        <!-- 新建弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="新建用户" width="500">
            <!-- 表单 -->
            <el-form ref="userForm" :model="formData" :rules="rules">
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input type="password" v-model="formData.password" placeholder="请输入用户密码" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formData.mobile" placeholder="请输入手机号" />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="flex">
                    <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(userForm)">保存</el-button>
                </div>
            </template>

        </el-dialog>
        <!-- 编辑弹窗 -->
        <el-dialog v-model="dialogFormEVisible" title="编辑用户" width="500">
            <!-- 表单 -->
            <el-form ref="userForm2" :model="formData2" :rules="rules2">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData2.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formData2.mobile" placeholder="请输入手机号" />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="flex">
                    <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEForm(userForm2)">保存</el-button>
                </div>
            </template>

        </el-dialog>
    </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { userListApi, userAddApi,userChangeStateApi,userChangeInfoApi,userdeleteApi } from "@/util/request";

export default {
    name: "roles",
    setup() {
        const data = reactive({
            searchParams: {
                query: '',//搜索关键字
                pagesize: 5,
                pagenum: 1 // 当前页码
            },
            total: 0,
            userList: [],
            dialogFormVisible: false,
            dialogFormEVisible: false,
            formData: {
                username: '',
                password: '',
                email: '',
                mobile: '',
            },
            formData2: {
                id: '',
                email: '',
                mobile: ''
            },
            rules: {
                username: [{
                    required: true,//必填
                    message: '请输入用户名称',
                    trigger: 'blur'// 失去焦点触发
                }],
                password: [{
                    required: true,//必填
                    message: '请输入密码',
                    trigger: 'blur'// 失去焦点触发
                }],
                email: [{
                    required: false,//非必填
                    pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,//邮箱格式验证
                    message: '请输入正确邮箱',
                    trigger: 'blur'// 失去焦点触发
                }],
                mobile: [{
                    required: false,//非必填
                    pattern: /^1[3-9]\d{9}$/,//手机号格式验证
                    message: '请输入正确手机号',
                    trigger: 'blur'// 失去焦点触发
                }]
            },
            rules2: {
                email: [{
                    required: false,//非必填
                    pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,//邮箱格式验证
                    message: '请输入正确邮箱',
                    trigger: 'blur'// 失去焦点触发
                }],
                mobile: [{
                    required: false,//非必填
                    pattern: /^1[3-9]\d{9}$/,//手机号格式验证
                    message: '请输入正确手机号',
                    trigger: 'blur'// 失去焦点触发
                }]
            }
        });
        const searchList = () => {
            userListApi(data.searchParams).then(res => {//请求接口
                if (res.data) {
                    console.log("用户列表数据", res);
                    data.userList = res.data.users;
                    data.total = res.data.total;
                }
            });
        };
        const addUser = () => {
            data.dialogFormVisible = true;
        };
        const submitForm = (formEl) => {
            // validate
            formEl.validate(ref => {//formEl.validate()返回Promise,Promise的then方法接收一个回调函数,回调函数接收一个布尔值,true表示验证通过,false表示验证失败
                if (!ref) {
                    return
                }
                //表单验证通过接口
                userAddApi(data.formData).then(res => {
                    if (res.data) {
                        alert("表单验证通过")
                        data.dialogFormVisible = false;//关闭弹窗
                        
                        data.formData = {//清空表单数据
                            username: '',
                            password: '',
                            email: '',
                            mobile: '',
                        }
                        searchList(); //刷新列表
                    }
                })

            })
        }
        //编辑弹窗
        const submitEForm = (formEl) => {
            formEl.validate(reef=>{//formEl.validate()返回Promise,Promise的then方法接收一个回调函数,回调函数接收一个布尔值,true表示验证通过,false表示验证失败
                if (!reef) {
                    return
                }
                //提交修改
                userChangeInfoApi(data.formData2).then(res=>{
                    if (res.data) {
                        searchList(); //刷新列表
                        data.dialogFormEVisible = false;//关闭弹窗
                    }
                })

            })
            }
        const switchChange= (row) => {
            console.log("切换状态", row);
            userChangeStateApi(row).then(res => {
                if (res.data) {

                    searchList(); //刷新列表
                }
            })
        }
        //数据编辑
        const editRow= (row) => {
            console.log("编辑的数据", row);
            const { email, mobile,id } = row;
            //展示编辑弹窗
            data.dialogFormEVisible = true;
            data.formData2.email=email      
            data.formData2.mobile=mobile
            data.formData2.id=id
            
        }
      const  deleteRow= (row) => {
        userdeleteApi(row).then(res=>{
            if(res.data){
                searchList()
            }
        })

      }

        //方法初始化
        searchList();
        const userForm2 = ref()
        const userForm = ref()
        return {
            ...toRefs(data),
            searchList,
            addUser,
            submitForm,
            submitEForm,
            userForm,
            userForm2,
            switchChange,
            editRow,
            deleteRow
        };
    }
}
</script>

<style scoped>
.input_box {
    width: 200px;
    margin-right: 15px;
}
</style>

